<script setup>
  import {computed, ref} from "vue";
  import {useRouter} from "vue-router";
  import useCity from "@/stores/modules/city";
  import {storeToRefs} from "pinia";
  import CityGroup from "@/views/city/cpns/cityGroup.vue";

  const router = useRouter()
  const cityStore = useCity()

  //搜索框功能
  const searchValue = ref('')
  const cancelClick = () => {
    router.back()
  }

  //tab切换
  const tabActive = ref()

  //网络请求：请求城市数据
  cityStore.fetchCity()
  const {allCity} = storeToRefs(cityStore)

  //获取选中标签后的数据
  // const groupList = computed(() => allCity.value[tabActive.value])

</script>

<template>
  <div class="city topPage">
    <div class="top">
      <!--1.搜索框-->
      <van-search v-model="searchValue" shape="round"
                  placeholder="城市/区域/位置" show-action
                  @cancel="cancelClick"/>

      <!--2.tab切换-->
      <van-tabs v-model:active="tabActive" lineRef-height="2">
        <template v-for="(value,key) in allCity" :key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>
      </van-tabs>
    </div>

    <div class="content">
      <template v-for="(value,key,index) in allCity" :key="index">
        <!--城市展示-->
        <city-group v-show="tabActive === key" :groupList="value"/>
      </template>
    </div>

  </div>
</template>

<style lang="less" scoped>
  .city {
    //top固定定位
    /*.top{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
    }

    .content {
      margin-top: 98px;
    }*/

    //局部滚动
    .content {
      height: calc(100vh - 98px);
      overflow-y: auto;
    }
  }
</style>